<template>
  <div class="body1">
    <div class="MaxBox">
      <span class="title">登录入口</span>

      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="account">
          <div class="inp1">
            <i class="iconfont icon-yonghu" id="user"></i>
            <el-input v-model="ruleForm.account" clearable> </el-input>
          </div>
        </el-form-item>

        <el-form-item prop="password">
          <div class="inp2">
            <i class="iconfont icon-suoding" id="suo"></i>
            <el-input v-model="ruleForm.password" show-password></el-input>
          </div>
        </el-form-item>

        <div class="btn">
          <el-button type="primary" @click="loginBtn('ruleForm')"
            >登录</el-button
          >
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { checkLogin } from "@/api/user.js";

export default {
  data() {
    // 验证规则
    const yzzh = (rule, value, callback) => {
      // 定义正则
      let reg = /^[1][3-9][0-9]{9}$/;
      if (reg.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的手机号"));
      }
    };

    return {
      ruleForm: {
        account: "",
        password: "",
      },
      // 验证
      rules: {
        account: [
          // {
          //   validator: yzzh,
          //   trigger: "blur",
          // },
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12位", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 2, max: 12, message: "长度在 2 到 12位", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    // 登录按钮事件
    loginBtn() {
      this.$refs.ruleForm.validate(async (valid) => {

        if (valid) {
          // 请求接口
          //await  等待axios的执行结果
          let res = await checkLogin(this.ruleForm);
          let { code, id, role, token, msg } = res.data;  //解构
          //成功
          if (code === 0) {
            // // element提示弹窗
            // this.$message({
            //   message: msg,
            //   type: "success",
            // });
            //存入本地数据
            localStorage.setItem("user",JSON.stringify({id,role,token,})
            );
            //跳转页面
            this.$router.push("/home");
          } else {
            // 否则提示错误提示
            this.$message.error(msg);
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
// input框 透明
// 深度修改
/deep/.el-input__inner {
  background: transparent;
  color: #fff;
}

.body1 {
  width: 100%;
  height: 100%;
  background: #2d3a4b;
}
.el-button--primary {
  width: 100%;
}

.MaxBox {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 353px;
  height: 230px;
  background: #2d3a4b;
  .title {
    display: inline-block;
    width: 100%;
    height: 50px;
    text-align: center;
    // margin: auto;
    margin-bottom: 18px;
    line-height: 50px;
    font-size: 18px;
    font-weight: bold;
    color: #fff;
  }
}
.inp1 {
  position: relative;
  margin: auto;
  width: 350px;
}
#user {
  z-index: 9999;
  position: absolute;
  left: 5px;
  top: 1px;
  width: 20px;
  height: 20px;
  color: rgb(255, 255, 255);
}
#suo {
  z-index: 9999;
  position: absolute;
  left: 5px;
  top: 25px;
  width: 20px;
  height: 20px;
  color: rgb(255, 255, 255);
}
.inp2 {
  position: relative;
  padding-top: 23px;
  margin: auto;
  width: 350px;
}
.btn {
  margin: auto;
  width: 350px;
  padding-top: 27px;
}
</style>